<!--
 * @author  guojiteng
 跳转题目 新增/编辑
-->
<template>
  <div class="question-jump">
    <div class="main-title">新建/编辑跳题规则配置</div>
    <el-form
      ref="form"
      :model="form"
      class="dataForm"
      label-position="right"
      label-width="140px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="试题类型">
            <el-select
              v-model="form.type"
              disabled
              placeholder="请选择分类"
              clearable
              :style="{width:'100%'}"
            >
              <el-option
                v-for="(item, index) in dict.WJWTLX"
                :key="index"
                :label="item.dictName"
                :value="item.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template>
      <danxuan v-if="form.type === 'WJWTLX_01'" ref="danxuan" :type="form.type" :get-data="data" :q-list="questionList" />
      <tiankong v-else ref="tiankong" :key="tkTime" :type="form.type" :get-data="data" :q-list="questionList" />
    </template>
    <div class="dialog-footer" style="text-align:center;">
      <el-button style="padding: 10px 30px;" @click="cancel()">取消</el-button>
      <el-button type="primary" @click="saveFun()">保存</el-button>
    </div>
  </div>
</template>
<script>
import { get, update, getDictByCode } from '../api/question'
import Danxuan from '../components/jump/Danxuan'
import Tiankong from '../components/jump/Tiankong'
import { mapGetters } from 'vuex'
import { queryQuestion, saveJump } from '@/views/activity/dcwj/api/jump'
export default {
  name: 'QuestionJump',
  components: { Danxuan, Tiankong },
  data() {
    return {
      tkTime: new Date().getTime(),
      form: {
        type: ''
      },
      dict: {
        WJWTLX: []
      },
      typeArr: [
        {
          type: 'WJWTLX_01',
          cName: 'danxuan'
        },
        {
          type: 'WJWTLX_02',
          cName: 'duoxuan'
        }, {
          type: 'WJWTLX_03',
          cName: 'tiankong'
        }, {
          type: 'WJWTLX_04',
          cName: 'tiankong'
        }, {
          type: 'WJWTLX_05',
          cName: 'tiankong'
        }, {
          type: 'WJWTLX_06',
          cName: 'tiankong'
        }, {
          type: 'WJWTLX_07',
          cName: 'tiankong'
        }
      ],
      data: {},
      questionList: [] // 可选试题
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  created() {
    for (const i in this.dict) {
      this.getDict(i)
    }
  },
  methods: {
    getDict(code) {
      return new Promise((resolve, reject) => {
        getDictByCode(code).then(response => {
          this.dict[code] = response.data.data[0].list
          this.questionId = this.$route.query.i || ''
          this.getFormInfo(this.questionId)
          this.getQuestionList(this.questionId)
          if (code === 'WJWTLX' && response.data.data[0].list.length > 0) {
            this.form.type = response.data.data[0].list[0].dictValue
          }
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
    /**
     * 获取可选试题
     * */
    getQuestionList(id) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.1)'
      })
      return new Promise((resolve, reject) => {
        queryQuestion({ id: id }).then(res => {
          loading.close()
          this.questionList = res.data.data || []
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },
    getFormInfo(id) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.1)'
      })
      return new Promise((resolve, reject) => {
        get({ id: id }).then(res => {
          loading.close()
          this.form.type = res.data.data.questionType
          this.data = res.data.data
          console.log('pdata', this.data)
          this.tkTime = new Date().getTime()
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },
    cancel() {
      this.$router.back()
    },
    saveFun() {
      const cName = this.typeArr.filter(item => {
        return item.type === this.form.type
      })[0].cName
      const postData = this.$refs[cName].getJson()
      console.log('json', postData)
      if (postData) {
        this.loading = this.$loading({
          lock: true,
          text: '请稍后',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.1)'
        })
        const data = {
          questionSkip: postData,
          id: this.questionId
        }
        update(data).then(res => {
          this.loading.close()
          this.$message({
            title: '成功',
            message: '配置成功！',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.$router.back()
            }
          })
        }).catch(() => {
          this.loading.close()
        })
      }
    }
  }
}
</script>
<style lang="scss" type="text/scss">
$dark_gray: #bfced6;
.question-jump {
  width: 100%;
  background-color: #fff;
  padding: 10px;
  .el-card__body {
    display: flex;
    line-height: 1.5;
    .title {
      font-size: 18px;
      font-weight: bold;
    }
    .ailicontent {
      display: flex;
      align-items: center;
    }
    .show-more-btn {
      flex: 0 0 60px;
      text-align: center;
      color: $mainColor;
      cursor: pointer;
    }
  }
  .main-title {
    position: relative;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    font-family: PingFangSC-Medium;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    font-size: 14px;
    margin-bottom: 10px;
    &:before {
      content: "";
      position: absolute;
      width: 2px;
      @include bg-color($mainColor);
      top: 13px;
      bottom: 13px;
      left: 15px;
    }
  }
  .dataForm {
    width: 95%;
    margin: 20px auto 0;
    &.nomt {
      margin-top: 0;
    }
  }
}
</style>
